<template>
  <button class="b-button" :class="classes">
    <slot />
  </button>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  type: { type: String, default: null },
  size: { type: String, default: null }
})
const classes = computed(() => {
  const arr = []
  if (props.type) {
    arr.push(`b-button--${props.type}`)
  }
  return arr
})
</script>

<style lang="less" scoped>
  .b-button {
    border-radius: 18px;
    transition: transform .2s ease-in-out;
    color: #fff;
    @apply tw-px-12 tw-py-4 sm:tw-px-12 sm:tw-py-6 tw-font-bold tw-text-base sm:tw-text-2xl;
    box-shadow: 0 0 3px rgba(0, 0, 0, .5), 3px 3px 5px 3px rgba(0, 0, 0, .35);
    &, &--primary {
      background-color: #019888;
    }
    &--warning {
      background-color: #f1720b;
    }
    &:hover {
      opacity: 0.95;
      transform: translate(-2px, -2px);
    }
  }
</style>
